import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import areaStatisticsService from "@/modules/statisticalManagement/areaStatistics.service";
import useNavigator from "@/hooks/useNavigator";
import { $getAreaList } from "@/api/common/common";
import { useStore as useUserStore } from "@/store/user";
import { message, Modal } from "ant-design-vue";
import { $getForthArea, $getFifthArea } from "@/api/common/common";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const addRef = ref(null as any);
    const voucherRef = ref(null as any);
    const state = reactive({
      toolbar: {
        left: ["refresh"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "名次",
          dataIndex:"index",
          align: "center",
          width: "80px",
        },
        {
          title: "市",
          dataIndex: ["city_id", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "区/县",
          dataIndex: ["area_id", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "累计参保人数",
          dataIndex: "count",
          align: "center",
          width: "120px",
        },
        {
          title: "累计保费数",
          dataIndex: "sum_premium",
          align: "center",
          width: "100px",
        },
        {
          title: "续保率",
          dataIndex: "percent",
          align: "center",
          width: "80px",
        },
      ],
      loading: false,
      searchForm: {
        city_id: {
          type: "select",
          label: "市",
          attrs: { placeholder: "请选择城市" },
          datas: [],
        },
        area_id: {
          type: "select",
          label: "区/县",
          attrs: { placeholder: "请选择区/县",},
          datas: [],
        },
        start_date_start_time: {
          type: "date",
          label: "生效开始时间",
        },
        start_date_end_time: {
          type: "date",
          label: "生效结束时间",
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    //获取城市列表
    $getAreaList({}).then((res: any) => {
      res.data.forEach((x: any) => {
        if (x.id == 933) {
          console.log(x);
          state.searchForm.city_id.datas = x.child.map((y: any) => {
            return {
              label: y.name,
              value: y.id,
              child: y.child,
            };
          });
        }
      });
    });
    //处理选择框多联
    const selectName = (e: any) => {
      if (e.name == "city_id") {
        state.searchForm.area_id.datas = [];
        state.searchForm[e.name].datas.forEach((x: any) => {
          if (x.value == e.id) {
            state.searchForm.area_id.datas = x.child.map((item: any) => {
              return {
                label: item.name,
                value: item.id,
              };
            });
          }
        });
        // state.searchForm.area_id.attrs.disabled = false;
        // state.searchForm.street_id.attrs.disabled = true;
        state.searchForm.street_id.datas = [];
        // state.searchForm.village_id.attrs.disabled = true;
        state.searchForm.village_id.datas = [];
      } else if (e.name == "area_id") {
        state.searchForm.street_id.datas = [];
        $getForthArea({ area_id: e.id }).then((res: any) => {
          state.searchForm.street_id.datas = res.data.map((item: any) => {
            return {
              label: item.name,
              value: item.id,
            };
          });
        });
        // state.searchForm.street_id.attrs.disabled = false;
        // state.searchForm.village_id.attrs.disabled = true;
        state.searchForm.village_id.datas = [];
      } else if (e.name == "street_id") {
        // state.searchForm.village_id.attrs.disabled = false;
        state.searchForm.village_id.datas = [];
        $getFifthArea({ id: e.id }).then((res: any) => {
          state.searchForm.village_id.datas = res.data.map((item: any) => {
            return {
              label: item.name,
              value: item.id,
            };
          });
        });
      }
    };
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new areaStatisticsService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      LTableRef.value.$fetchTableData();
    };
    const deleteRow = (id: string | number) => {
      Modal.confirm({
        title: "提示",
        content: "确认取消?",
        onOk: () => {
          $service
            .delete({
              order_no: id,
            })
            .then((res: any) => {
              LTableRef.value.$fetchTableData();
            });
        },
      });
    };
    return () => (
      <Page>
        <CardWithTitle title="低保区域统计">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
            onBlockSelect={(e: any) => {
              selectName(e);
            }}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              //row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  if (column.dataIndex === "percent") {
                      return <div>{record.percent}%</div>
                  }
                }
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    );
  },
});